import $ from "jquery";
import Bar from "./Bar";
import SearchBar from "./SearchBar";
import "./ExportPanel";

const btnStyle = "btn z-depth-0 pl-2 pr-2";
const btnColor = "btn-outline-light-blue";

const tpl = `<nav class="navbar navbar-expand-lg bg-white justify-content-center" >
  <div class="interaction-mode">
    <div class="btn-group">
      <div class="${btnStyle} ${btnColor} active" title="默认模式" data-mode="default">
        <div class="q-icon toolbar-default"></div>
      </div>
      <div class="${btnStyle} ${btnColor} " title="框选模式" data-mode="selection">
        <div class="q-icon toolbar-rectangle_selection"></div>
      </div>
      <div class="${btnStyle} ${btnColor} " title="浏览模式" data-mode="view">
        <div class="q-icon toolbar-pan"></div>
      </div>
    </div>

    <div class="btn-group d-none">
      <div class="${btnStyle} ${btnColor}" title="创建连线" data-mode="create.edge">
        <div class="q-icon toolbar-edge"></div>
      </div>
      <div class="${btnStyle} ${btnColor}" title="创建L型连线" data-mode="create.simple.edge" data-info='{"edgeType": "orthogonal.V.H"}'>
        <div class="q-icon toolbar-edge_VH"></div>
      </div>
      <div class="${btnStyle} ${btnColor}" title="创建多边形" data-mode="create.shape">
        <div class="q-icon toolbar-polygon"></div>
      </div>
      <div class="${btnStyle} ${btnColor}" title="创建线条" data-mode="create.line">
        <div class="q-icon toolbar-line"></div>
      </div>
    </div>
  </div>

  <div class="btn-group zoom">
    <div class="${btnStyle} ${btnColor} " title="放大" data-action="zoomIn">
      <div class="q-icon toolbar-zoomin"></div>
    </div>
    <div class="${btnStyle} ${btnColor} " title="缩小" data-action="zoomOut">
      <div class="q-icon toolbar-zoomout"></div>
    </div>
    <div class="${btnStyle} ${btnColor} " title="1:1" data-action="zoomReset">
      <div class="q-icon toolbar-zoomreset"></div>
    </div>
    <div class="${btnStyle} ${btnColor} " title="纵览" data-action="zoomOverview">
      <div class="q-icon toolbar-zoom_overview"></div>
    </div>
  </div>

  <div class="searchbar input-group mr-2" style="max-width: 170px">
    <input type="text" class="form-control" placeholder="Name">
    <div class="input-group-append">
      <button class="${btnStyle} ${btnColor} m-0" title="搜索">
        <div class="q-icon toolbar-search"></div>
      </button>
    </div>
  </div>

  <div id="export-img" class="${btnStyle} ${btnColor}" title="导出图片">
    <div class="q-icon toolbar-print"></div>
  </div>

  <div id="btnJSONShow" title="JSON Export" class="${btnStyle} ${btnColor}">
    <div class="q-icon toolbar-json"></div>
  </div>
  <div id="btnOverview" title="Show Overview Panel" class="${btnStyle} ${btnColor}">
    <div class="q-icon toolbar-overview"></div>
  </div>
  <div title="Maximize" id="maximize" class="${btnStyle} ${btnColor} d-none">
    <div class="q-icon toolbar-max"></div>
  </div>
</nav>

`;

//上面的工具栏
class Toolbar extends Bar {
	constructor(options) {
		super(options);
		this.options = options;
		this.editor = options.editor;

		this.init();
	}

	init() {
		this.$bar = $(tpl);
		this.$parent.append(this.$bar);

		this.$interactionMode = this.$bar.find(".interaction-mode");
		this.$zoom = this.$bar.find(".zoom");

		this.initEvents();
	}

	initEvents() {
		let graph = (this.graph = this.getGraph());

		// 改变交互模式
		this.$interactionMode.find(".btn").on("click", this, this.setInteractionMode);

		this.$zoom.find(".btn").on("click", this, this.onZoom);

		if (graph) {
			graph.propertyChangeDispatcher.addListener(this.onInteractionModeChange, this);
		}

		new SearchBar({
			editor: this.editor,
			el: this.$bar.find(".searchbar"),
		});

		$("#export-img").on("click", () => {
			Q.showExportPanel(graph);
		});
	}

	onInteractionModeChange(evt) {
		if (evt.kind == "interactionMode") {
			this.updateButtonStatus();
		}
	}

	setInteractionMode(evt) {
		let self = evt.data;
		var g = self.getGraph();
		if (!g) {
			return;
		}
		g.interactionMode = $(this).data("mode");

		let info = $(this).data("info");
		if (info) {
			g.interactionProperties = info;
		}
	}

	updateButtonStatus() {
		var g = this.graph;
		var mode = g ? g.interactionMode : null;

		this.$bar.find(".btn").each(function (index, btn) {
			let interactionMode = $(btn).data("mode");
			if (mode && interactionMode == mode) {
				$(btn).addClass("active");
				return;
			}
			$(btn).removeClass("active");
		});
	}

	onZoom(evt) {
		let self = evt.data;
		let action = $(this).data("action");

		self[action] && self[action]();
	}

	zoomIn() {
		if(this.editor.isMapGraph) {
			this.graph.map.zoomIn()
		}else {
			this.graph.zoomIn();
		}
	}

	zoomOut() {
		if(this.editor.isMapGraph) {
			this.graph.map.zoomOut()
		}else {
			this.graph.zoomOut();
		}
	}

	zoomReset() {
		if(!this.editor.isMapGraph) {
			this.graph.moveToCenter(1);
		}
	}

	zoomOverview() {
		if(this.editor.isMapGraph) {
			this.graph.map.setZoom(this.editor.graphInfo.Props.zoom)
		}else {
			this.graph.zoomToOverview();
		}
	}
}

export default Toolbar;
